/*
 * @Author: hc
 * @Date: 2024-03-04 14:00:36
 * @LastEditTime: 2024-03-25 10:44:49
 * @LastEditors: hc
 * @Description:
 */
import { RollbackOutlined } from '@ant-design/icons';
import { useEventListener } from 'ahooks';
import { useEffect, useRef, useState } from 'react';
import { Button, message, useModal } from '../../functionalComponent';
import { Layout, useRefs } from '../../util';
import FunctionInfo from './component/functionInfo';
import SelectCtx from './component/selectCtx';
import Editor from './component/textareaEditor';
import { TextareaEditorAPI } from './component/textareaEditor/types';
import { expressionValidate } from './service';
import {
  BizPoint,
  DataModelRequest,
  DefinitionRequest,
  DefinitionVersionRequest,
  EarlyWarningRequest,
  ValueType
} from './types';

type Itype = TypeA | TypeB | TypeC | TypeD;
type TypeA = { type: 'dataModelRequest'; value: DataModelRequest & { bizPoint: BizPoint } };
type TypeB = { type: 'definitionVersionRequest'; value: DefinitionVersionRequest & { bizPoint: BizPoint } };
type TypeC = { type: 'definitionRequest'; value: DefinitionRequest & { bizPoint: BizPoint } };
type TypeD = { type: 'earlyWarningRequest'; value: EarlyWarningRequest & { bizPoint: BizPoint } };
interface Iprops {
  type: Itype;
  value?: ValueType;
}
export default function ({ type, value }: Iprops) {
  const [getRef] = useRefs();
  const [ins, { params }] = useModal();
  const [currentFunc, setCurrentFunc] = useState(null);
  const editor = useRef<TextareaEditorAPI>(null);
  const validExpress = async () => {
    const t = editor.current?.getHtmlValue();
    try {
      if (t) {
        const text = t;
        const d = await expressionValidate({ ...type.value, expressionDisplay: text });
        getRef('FunctionInfo').current?.changeActiveKeyAndParmam('2', d?.validateMsg);
        return d;
      }
    } catch {
      message.warn('接口报错');
    }
  };
  useEffect(() => {
    if (value) {
      editor.current?.setDefaultHtml(value?.label ?? '');
    }
  }, [value]);
  useEffect(() => {
    ins.setApi({ getValue });
  }, []);

  const getValue = async () => {
    const res = await validExpress();
    return res;
  };

  useEventListener('keydown', (ev) => {
    // ctrl+z 回退
    if (ev.code == 'KeyZ' && ev.ctrlKey) {
      editor.current?.back();
    }
  });

  return (
    <Layout direction="row" autoFit>
      <Layout.Flex flex={1} style={{ marginRight: 8 }}>
        <SelectCtx editor={editor} setCurrentFunc={setCurrentFunc} sendParams={type.value} />
      </Layout.Flex>
      <Layout.Flex flex={2} direction="column">
        <Layout.Flex style={{ marginTop: 5, position: 'relative', overflow: 'visible' }}>
          <Editor ref={editor} />
          <div
            style={{
              position: 'absolute',
              right: 12,
              bottom: -38,
              display: 'flex',
              alignItems: 'center',
              gap: '8px'
            }}
          >
            <Button
              style={{ zIndex: 99 }}
              type="primary"
              onClick={() => editor.current?.back()}
              icon={<RollbackOutlined />}
            />
            <Button
              style={{ zIndex: 99, transform: 'rotateY(180deg)' }}
              type="primary"
              onClick={() => editor.current?.forward()}
              icon={<RollbackOutlined />}
            />
            <Button style={{ zIndex: 99 }} type="primary" onClick={() => editor.current?.reset()}>
              清空
            </Button>
            <Button style={{ zIndex: 99 }} type="primary" onClick={validExpress}>
              校验
            </Button>
          </div>
        </Layout.Flex>
        <FunctionInfo currentFunc={currentFunc} childRef={getRef('FunctionInfo')} />
      </Layout.Flex>
    </Layout>
  );
}
